<template>
	<view>
		<u-search v-model="query" placeholder="请输入地址" @input="onInput" class="search-input"></u-search>
		<ul v-if="suggestions.length > 0" class="suggestion-list">
			<li v-for="(item, index) in suggestions" :key="index" @click="selectSuggestion(item)"
				class="suggestion-item">
				<img src="@/static/images/address.png" alt="" class="suggestion-icon" />
				<div class="suggestion-text">
					<div class="suggestion-name">{{ item.name }}</div>
					<div class="suggestion-district">{{ formatDistrict(item.district || item.address) }}</div>
				</div>
			</li>
		</ul>
	</view>
</template>

<script>
	import amap from "../../common/amap-wx.js";
	import {
		key
	} from "../../common/map-key.js";

	export default {
		data() {
			return {
				query: "", // 搜索框的输入
				suggestions: [], // 存储高德API返回的地址联想
				amapPlugin: null,
				targeLogs: null
			};
		},

		onLoad(options) {
			// 解析参数
			const targeLog = decodeURIComponent(options.targeLog);
			this.targeLogs = targeLog;
			console.log("targeLog:"+this.targeLogs); // 打印参数值或进行其他处理
		},

		mounted() {
			this.amapPlugin = new amap.AMapWX({
				key: key
			});
		},
		methods: {
			// 监听输入，调用高德API进行联想
			onInput() {
				if (this.query.length < 2) {
					this.suggestions = [];
					return;
				}
				this.amapPlugin.getInputtips({
					keywords: this.query,
					location: "", // 可以根据需要添加城市或定位信息
					success: (data) => {
						if (data && data.tips) {
							this.suggestions = data.tips.filter((tip) => tip.location);
						}
					},
					fail: (error) => {
						console.error("地址联想失败:", error);
					}
				});
			},
			// 在调用 selectSuggestion 之前清空 storage
			clearStorage() {
				try {
					uni.removeStorageSync('selected_address');
					console.log('存储已清空');
				} catch (e) {
					console.error('清空存储失败', e);
				}
			},
			// 格式化省市区信息
			formatDistrict(district) {
				if (!district) return '';

				// 在省份和市名后面添加空格
				return district.replace(/省/g, '省 ').replace(/市/g, '市 ');
			},
			// 用户选择某个联想结果后
			selectSuggestion(item) {
				// 清空之前的存储
				this.clearStorage();

				this.query = item.name;
				this.suggestions = []; // 清空联想列表

				if (item.location) {
					const locationArray = item.location.split(',');
					if (locationArray.length === 2) {
						const [longitude, latitude] = locationArray;

						try {
							if (this.targeLogs == 2) {
								uni.setStorageSync('selected_endAddress', {
									name: item.name,
									address: item.address || '',
									longitude,
									latitude
								});
								console.log('End address storage success');
							} else {
								uni.setStorageSync('selected_orginAddress', {
									name: item.name,
									address: item.address || '',
									longitude,
									latitude
								});
								console.log('Origin address storage success');
							}

							// 使用 switchTab 跳转到 TabBar 页面
							uni.switchTab({
								url: '/pages/index/index',
								success() {
									console.log('Page switch success');
								},
								fail(error) {
									console.error('Page switch failed', error);
								}
							});
						} catch (e) {
							console.error('Storage operation failed', e);
						}
					} else {
						console.error('Location format is invalid');
					}
				} else {
					console.error('No location information available');
				}
			}

		}
	};
</script>

<style scoped>
	/* .search-input {
		width: 90%;
		margin-left: 10px;
		padding: 10px;
		border-radius: 17px;
		background-color: #ddd;
		font-size: 16px;
		margin-bottom: 10px;
	} */

	.suggestion-list {
		list-style: none;
		padding: 0;
		margin: 0;
		background-color: #fff;
		border: 1px solid #ddd;
	}

	.suggestion-item {
		display: flex;
		align-items: center;
		padding: 10px;
		cursor: pointer;
	}

	.suggestion-item:hover {
		background-color: #f0f0f0;
	}

	.suggestion-icon {
		width: 24px;
		height: 24px;
		margin-right: 10px;
	}

	.suggestion-text {
		display: flex;
		flex-direction: column;
	}

	.suggestion-name {
		font-weight: bold;
	}

	.suggestion-district {
		font-size: 14px;
		color: #666;
	}
</style>